<template>
  <div id="version-list">
      <Row type="flex" class="version-list-tab">
        <RadioGroup v-model="buttonSize" type="button">
            <Radio class="module-menu-btn" label="0">版本升级</Radio>
            <Radio class="module-menu-btn" label="1">站内消息</Radio>
        </RadioGroup>
      </Row>
      <Table stripe class="table-list" ref="selection" :columns="columns1" :data="data1">
        <template slot-scope="{ row, index }" slot="name">
          <p class="version-list-name" @click="show(index)">
            <a>
             <Badge status="processing" />
             <span>{{ row.name }}</span>
             </a>
            </p>
        </template>
      </Table>
  <Row type="flex">
      <Col span="12" class="module-menu-nav">
            <Button class="module-menu-margin" @click="handleSelectAll(true)">全选</Button>
            <Button class="module-menu-margin">标记已读</Button>
      </Col>
     </Row>
  </div>
</template>

<script>
export default {
  name: 'version_list',
  data () {
    return {
      buttonSize: '0',
      columns1: [
        {
          type: 'selection',
          width: 100,
          align: 'center'
        },
        {
          title: '版本号',
          slot: 'name'
        },
        {
          title: '时间',
          key: 'time'
        }
      ],
      data1: [
        {
          name: 'John Brown',
          time: '2018-08-25 14:45'
        },
        {
          name: 'Jim Green',
          time: '2018-08-25 14:45'
        },
        {
          name: 'Joe Black',
          time: '2018-08-25 14:45'
        },
        {
          name: 'Jon Snow',
          time: '2018-08-25 14:45'
        }
      ]
    }
  },
  methods: {
    show (index) {
      this.$router.push({ name: 'message_detail', query: { id: 1 } })
    },
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    }
  }
}
</script>

<style lang='less'>
#version-list {
  .version-list-tab {
    padding: 24px 32px;
  }
  .version-list-name {
    color: #464c5b;
  }
  .version-list-name a {
    color: #464c5b;
  }
  .module-menu-btn {
    width: 80px;
    height: 32px;
  }
  .ivu-radio-group-button .ivu-radio-wrapper-checked {
    background: #2d8cf0;
    color: #FFFFFF;
  }
  .version-list-name a:hover {
    color: #2d8cf0;
    text-decoration: underline;
  }
}
</style>
